<template>
  <div id="display"></div>
</template>

<script>
  import {take, map,merge,switchAll} from 'rxjs/operators'
  import {interval} from 'rxjs'
  let listener = (x, y) =>{
    console.log('已订阅.',x,y)
    document.querySelector('#display').innerText += '.'
  };
  export default {
    name: "switch-all",
    mounted() {
      const fast$ = interval(100);
      const med$ = interval(200);
      const slow = interval(500);
      slow.pipe(
        take(3),
        map(s => med$.pipe(
            map(m => `s=${s}:m=${m}`),
            take(3) //实际上只能发射1个
          )
        ),
        switchAll() //上游高阶 slow$  产生一个新的内部 Observable 时，switchAll 就会立即订阅最新的内部 Observable
      ).subscribe(listener)
      /**
       已订阅. s=0:m=0
       已订阅. s=0:m=1
       已订阅. s=1:m=0 /// interval-200的 没有变成2,而是被interval-500 刷新
       已订阅. s=1:m=1
       已订阅. s=2:m=0
       已订阅. s=2:m=1
       已订阅. s=2:m=2 */
    }
  }
</script>

<style scoped>

</style>
